<template>
    <div class="detail-page">
        <!-- 顶部信息区 -->
        <el-card shadow="never" class="header-card">
            <div class="header-grid">
                <div class="cover">
                    <el-image :src="fromsdata.image" fit="cover" class="cover-img" />
                </div>
                <div class="meta">
                    <div class="title-row">
                        <h2 class="product-title">{{ fromsdata.goodsName }}</h2>
                        <div class="title-actions">
                            <el-button size="small" type="primary" plain>核对基本信息</el-button>
                            <el-button size="small">导出溯源码</el-button>
                        </div>
                    </div>
                    {{ Breedinfo }}
                    <el-descriptions :column="2" class="product-desc">
                        <el-descriptions-item label="生产批次">{{ fromsdata.productionBatch }}</el-descriptions-item>
                        <el-descriptions-item label="保质期">{{ fromsdata.expirationDate }} 天</el-descriptions-item>
                        <el-descriptions-item label="生产许可证号">{{ fromsdata.productionLicense }}</el-descriptions-item>
                        <el-descriptions-item label="生产企业">{{ fromsdata.productionFrim }}</el-descriptions-item>
                    </el-descriptions>

                    <div class="attach">

                        <div class="attach-label">产品检验报告</div>
                        <img src="http://localhost:5264/Img/3.jpg" alt="" width="120px">
                        <el-upload v-model="CPimg" action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">

                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 选项卡内容区 -->
        <el-card shadow="never" class="tabs-card">
            <el-tabs v-model="activeTab" class="main-tabs">
                <el-tab-pane label="养殖信息 (5/5)" name="farm">
                    <!-- 养殖信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">养殖信息</span>
                            <el-button size="small" type="text"
                                @click="AddBreeddialogTableVisible = true">设置</el-button>
                        </div>

                        <!-- <el-descriptions :column="3" border class="info-table"> -->
                        <el-table :data="BreedData" style="width: 100%">
                            <el-table-column prop="breed" label="品种" width="180" />
                            <el-table-column prop="source" label="来源" width="180" />
                            <el-table-column prop="feedingDays" label="饲养天数" width="180" />
                            <el-table-column prop="brand" label="饲料品牌" width="180" />
                            <el-table-column prop="breederInCharge" label="饲养人" width="180" />
                            <el-table-column prop="outTime" label="出栏日期" width="180">
                                <template #default="scope">
                                    {{ moment(scope.row.outTime).format("YYYY年MM月DD日") }}
                                </template>
                            </el-table-column>

                        </el-table>
                        <!-- </el-descriptions> -->

                    </div>
                    <!-- 新增养殖信息 -->
                    <el-dialog v-model="AddBreeddialogTableVisible" title="新增养殖信息" width="800">
                        <el-form ref="ruleFormRef" style="max-width: 500px" :model="breeding" label-width="auto">
                            <el-form-item label="品种" prop="">
                                <el-input v-model="breeding.breed" />
                            </el-form-item>
                            <el-form-item label="来源" prop="">
                                <el-input v-model="breeding.source" />
                            </el-form-item>
                            <el-form-item label="饲养天数" prop="">
                                <el-input v-model="breeding.feedingDays" />
                            </el-form-item>
                            <el-form-item label="饲料品牌" prop="">
                                <el-input v-model="breeding.brand" />
                            </el-form-item>
                            <el-form-item label="饲养人" prop="">
                                <el-input v-model="breeding.breederInCharge" />
                            </el-form-item>
                            <el-form-item label="出栏日期">
                                <el-col :span="11">
                                    <el-date-picker v-model="breeding.outTime" type="date" placeholder="请选择日期"
                                        style="width: 100%" value-format="YYYY-MM-DD" />
                                </el-col>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="Addbreeding()">确定</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>

                    </el-dialog>
                    <!-- 保健信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">保健信息</span>
                            <el-button size="small" type="text" @click="addRow">新增行</el-button>
                        </div>

                        <el-table :data="healthCareData" style="width: 100%">
                            <el-table-column prop="feedingDays" label="饲养天数" width="120" />
                            <el-table-column prop="healthCareMethod" label="保健方式" />
                            <el-table-column prop="healthCareApproach" label="保健方法" />
                            <el-table-column label="操作" width="160">
                                <template #default="scope">
                                    <el-link type="primary">修改</el-link>
                                    <el-link type="primary" class="ml8" @click="Delhealth(scope.row.id)">删除</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 新增行输入区域 -->
                        <div class="add-row">

                            <el-form v-for="(row, index) in addbreedData" :key="index" v-model="addbreedData">
                                <el-input v-model="CreatHealth.feedingDays" placeholder="饲养天数" />
                                <el-input v-model="CreatHealth.healthCareMethod" placeholder="保健方式" />
                                <el-input v-model="CreatHealth.healthCareApproach" placeholder="保健方法" />

                            </el-form>
                            <div class="action-buttons">
                                <el-button size="small" type="primary" @click="addbeedrow()">保存</el-button>
                                <el-button size="small">取消</el-button>
                            </div>
                        </div>
                    </div>

                    <!-- 动检证子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">动检证</span>
                        </div>
                        <div class="upload-area">
                            <img src="http://localhost:5264/Img/2.jpg" alt="" width="120px">
                            <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                    </div>

                    <!-- 企业信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">企业信息</span>
                            <el-button size="small" type="text">设置</el-button>
                        </div>
                        <el-descriptions :column="2" border class="info-table">
                            <el-descriptions-item label="养殖场">成都金牛养殖基地</el-descriptions-item>
                            <el-descriptions-item label="负责人">张总</el-descriptions-item>
                            <el-descriptions-item label="存栏数量">5500只</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 企业照片子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">企业照片</span>

                        </div>
                        <div class="photos-grid">
                            <img src="http://localhost:5264/Img/兔1.webp" alt="" width="120px">
                            <img src="http://localhost:5264/Img/兔3.jpg" alt="" width="120px">
                            <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="屠宰信息 (5/5)" name="slaughter">
                    <!-- 屠宰信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">屠宰信息</span>
                            <el-button size="small" type="text">设置</el-button>
                        </div>
                        <el-descriptions :column="2" border class="info-table">
                            <el-descriptions-item label="批次">{{ fromsdata.productionBatch }}</el-descriptions-item>
                            <el-descriptions-item label="到厂时间">2025年8月22日10:30:20</el-descriptions-item>
                            <el-descriptions-item label="到厂均重">20公斤</el-descriptions-item>
                            <el-descriptions-item label="屠宰时间">2025年8月25日10:30:20</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 相关资质子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">相关资质</span>
                        </div>
                        <div class="upload-area">
                            <img src="http://localhost:5264/Img/1.jpg" alt="" style="width: 120px;">
                            <div class="upload-item">
                                <div class="upload-label">事前检疫</div>
                                <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </div>
                            <div class="upload-item">
                                <div class="upload-label">宰后质检</div>
                                <!-- <img src="http://localhost:5264/Img/9.jpg" alt="" style="width: 120px;"> -->
                                <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="深加工信息 (0/5)" name="processing">
                    <!-- 深加工信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">深加工信息</span>
                            <el-button size="small" type="text">设置</el-button>
                        </div>
                        <el-descriptions :column="2" border class="info-table">
                            <el-descriptions-item label="经理">产1证</el-descriptions-item>
                            <el-descriptions-item label="负责人">小陈</el-descriptions-item>
                            <el-descriptions-item label="经理">产2证</el-descriptions-item>
                            <el-descriptions-item label="负责人">小魏国</el-descriptions-item>
                            <el-descriptions-item label="经理">产3证</el-descriptions-item>
                            <el-descriptions-item label="负责人">吴俊鹏</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 食品安全信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">食品安全信息</span>
                            <el-button size="small" type="text">设置</el-button>
                        </div>
                        <div class="upload-area">
                            <div class="upload-item">
                                <div class="upload-label">人员健康证</div>
                                <img src="http://localhost:5264/Img/健康1.jpg" alt="" style="width: 120px;">

                                <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </div>

                            <div class="upload-item">
                                <div class="upload-label">体检报告</div>
                                <img src="http://localhost:5264/Img/报告1.jpg" alt="" style="width: 120px;height: 100px;">
                                <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </el-upload>
                            </div>
                        </div>
                    </div>

                    <!-- 供应商信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">供应商信息</span>
                            <el-button size="small" type="text">设置</el-button>
                        </div>

                        <!-- 原料 -->
                        <div class="supplier-item">
                            <div class="supplier-header">
                                <span class="supplier-title">原料</span>
                            </div>
                            <div class="supplier-content">
                                <el-descriptions :column="2" border class="info-table">
                                    <el-descriptions-item label="生产批次">{{ fromsdata.productionBatch
                                    }}</el-descriptions-item>
                                </el-descriptions>
                                <div class="upload-area">
                                    <div class="upload-item">
                                        <div class="upload-label">检验报告</div>
                                        <img src="http://localhost:5264/Img/3.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">出厂验收记录</div>
                                        <img src="http://localhost:5264/Img/9.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">供应商资质</div>
                                        <img src="http://localhost:5264/Img/1.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 辅料 -->
                        <div class="supplier-item">
                            <div class="supplier-header">
                                <span class="supplier-title">辅料</span>
                            </div>
                            <div class="supplier-content">
                                <el-descriptions :column="2" border class="info-table">
                                    <el-descriptions-item label="生产批次">{{ fromsdata.productionBatch
                                    }}</el-descriptions-item>
                                </el-descriptions>
                                <div class="upload-area">
                                    <div class="upload-item">
                                        <div class="upload-label">检验报告</div>
                                        <img src="http://localhost:5264/Img/1.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">出厂验收记录</div>
                                        <img src="http://localhost:5264/Img/3.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">供应商资质</div>
                                        <img src="http://localhost:5264/Img/2.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 添加剂 -->
                        <div class="supplier-item">
                            <div class="supplier-header">
                                <span class="supplier-title">添加剂</span>
                            </div>
                            <div class="supplier-content">
                                <el-descriptions :column="2" border class="info-table">
                                    <el-descriptions-item label="生产批次">{{ fromsdata.productionBatch
                                    }}</el-descriptions-item>
                                </el-descriptions>
                                <div class="upload-area">
                                    <div class="upload-item">
                                        <div class="upload-label">检验报告</div>
                                        <img src="http://localhost:5264/Img/9.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">出厂验收记录</div>
                                        <img src="http://localhost:5264/Img/2.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">供应商资质</div>
                                        <img src="http://localhost:5264/Img/1.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 包材 -->
                        <div class="supplier-item">
                            <div class="supplier-header">
                                <span class="supplier-title">包材</span>
                            </div>
                            <div class="supplier-content">
                                <el-descriptions :column="2" border class="info-table">
                                    <el-descriptions-item label="生产批次">{{ fromsdata.productionBatch
                                    }}</el-descriptions-item>
                                </el-descriptions>
                                <div class="upload-area">
                                    <div class="upload-item">
                                        <div class="upload-label">检验报告</div>、
                                        <img src="http://localhost:5264/Img/9.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">出厂验收记录</div>
                                        <img src="http://localhost:5264/Img/3.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                    <div class="upload-item">
                                        <div class="upload-label">供应商资质</div>
                                        <img src="http://localhost:5264/Img/2.jpg" alt="" style="width: 120px;">
                                        <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 企业信息子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">企业信息</span>
                            <el-button size="small" type="text">设置</el-button>
                        </div>
                        <el-descriptions :column="2" border class="info-table">
                            <el-descriptions-item label="公司名称">绵阳麻辣兔有限公司</el-descriptions-item>
                            <el-descriptions-item label="生产许可证号">{{ fromsdata.productionLicense
                            }}</el-descriptions-item>
                            <el-descriptions-item label="公司名称">绵阳麻辣兔有限公司</el-descriptions-item>
                            <el-descriptions-item label="生产许可证号">{{ fromsdata.productionLicense
                            }}</el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 企业照片子模块 -->
                    <div class="sub-section">
                        <div class="sub-header">
                            <span class="sub-title">企业照片</span>
                        </div>
                        <div class="photos-grid">
                            <img src="http://localhost:5264/Img/1.jpg" alt="" style="width: 120px;">
                            <el-upload action="http://localhost:5264/api/Image/Img" list-type="picture-card"
                                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </el-upload>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>







<script setup lang="ts">
import { fa, fr, pa } from 'element-plus/es/locales.mjs';
import { formatDiagnostic } from 'typescript';
import { onMounted, reactive, ref } from 'vue';

import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps } from 'element-plus'
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
const router = useRouter()
const route = useRoute()
//
const fromsdata = ref({
    "id": route.query.id,
    "goodsName": route.query.goodsName,
    "productionBatch": route.query.productionBatch,
    "expirationDate": route.query.expirationDate,
    "productionLicense": route.query.productionLicense,
    "productionFrim": route.query.productionFrim,
    "image": route.query.image
})

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
// UI 状态：选项卡与示例数据（仅用于展示，不影响原有功能）
const activeTab = ref('farm')

// 保健信息数据
const healthCareData = ref([])
const healthinfo = reactive({
    Bacth: route.query.productionBatch
})
const gethealth = () => {
    axios.get("http://localhost:5264/api/Breeding/GetHealth", { params: healthinfo }).then(res => {
        healthCareData.value = res.data.data
    })
}
//删除保健信息
const Delhealth = (id: any) => {
    ElMessageBox.confirm(
        '确定删除吗?',
        '删除',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.put("http://localhost:5264/api/Breeding/DelHealth", { id: id }).then(res => {
                if (res.data.code == 2000) {
                    ElMessage.success(res.data.msg)
                    gethealth()
                }
                else {
                    ElMessage.error(res.data.msg)
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
// 新增行数据
const addbreedData = ref([{
    "feedingDays": "",
    "healthCareMethod": "",
    "healthCareApproach": "",
}])
//新增保健
const CreatHealth = reactive({
    "feedingDays": "",
    "healthCareMethod": "",
    "healthCareApproach": "",
    "productionBatch": route.query.productionBatch
})
// 新增行方法
const addRow = (row: any) => {
    addbreedData.value.push({
        "feedingDays": "",
        "healthCareMethod": "",
        "healthCareApproach": "",
    });
};
const resethealth = () => {
    CreatHealth.feedingDays = ""
    CreatHealth.healthCareApproach = ""
    CreatHealth.healthCareMethod = ""
}
//保存保健信息
const addbeedrow = () => {
    axios.post("http://localhost:5264/api/Breeding/AddHealth", CreatHealth).then(res => {
        if (res.data.code == 2000) {
            ElMessage.success(res.data.msg)
            gethealth()
            resethealth()
        }
        else {
            ElMessage.error(res.data.msg)
        }
    })
}
//多图片上传
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    dialogVisible.value = true
}
//养殖信息列表
const BreedData = ref([])
const Breedinfo = reactive({
    Batch: route.query.productionBatch
})
const getbreeding = () => {
    axios.get("http://localhost:5264/api/Breeding/GetBreeding", { params: Breedinfo }).then(res => {
        BreedData.value = res.data.data
    })
}
//新增养殖信息
const breeding = reactive({
    "breed": "",
    "source": "",
    "feedingDays": "",
    "brand": "",
    "breederInCharge": "",
    "productionBatch": route.query.productionBatch,
    "outTime": ""
})
const resetbreeding = () => {
    breeding.brand = ""
    breeding.breed = ""
    breeding.feedingDays = ""
    breeding.source = ""
    breeding.breederInCharge = ""
    breeding.productionBatch = ""
    breeding.outTime = ""
}
//打开新增弹窗框
const AddBreeddialogTableVisible = ref(false)
//养殖信息新增网络请求
const Addbreeding = () => {
    //breeding.outTime = moment(breeding.outTime).format("YYYY-MM-DD");
    axios.post("http://localhost:5264/api/Breeding/AddBreeding", breeding).then(res => {
        if (res.data.code == 2000) {
            ElMessage.success(res.data.msg)
            AddBreeddialogTableVisible.value = false
            getbreeding()
            resetbreeding()
        }
        else {
            ElMessage.error(res.data.msg)
        }
    })
}
//产品图片
const CPimg = ref([])
//挂载函数
onMounted(() => {
    getbreeding()
    gethealth()
})
</script>




























<style scoped>
.detail-page {
    padding: 16px;
    background: #f5f7fa;
    min-height: 100vh;
}

.header-card {
    margin-bottom: 16px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.header-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
}

.cover-img {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.product-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #303133;
}

.title-actions :deep(.el-button) {
    border-radius: 6px;
    padding: 6px 12px;
    margin-left: 8px;
}

.product-desc :deep(.el-descriptions__label) {
    color: #909399;
    font-weight: 500;
}

.product-desc {
    margin-bottom: 16px;
}

.product-desc :deep(.el-descriptions__body) {
    padding: 8px 0 0 0;
}

.product-desc :deep(.el-descriptions__cell) {
    padding: 6px 12px;
}

.attach {
    display: flex;
    align-items: center;
    gap: 12px;
}

.attach-label {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
    min-width: 80px;
}

/* 上传卡片外观 */
.attach :deep(.el-upload--picture-card) {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    border: 1px dashed #dcdfe6;
}

.attach :deep(.el-upload) {
    margin: 0;
}

.attach :deep(.el-icon) {
    font-size: 18px;
    color: #909399;
}

/* 选项卡卡片 */
.tabs-card {
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.main-tabs :deep(.el-tabs__header) {
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
}

.main-tabs :deep(.el-tabs__item) {
    font-size: 14px;
    font-weight: 500;
    color: #606266;
}

.main-tabs :deep(.el-tabs__item.is-active) {
    color: #409eff;
    font-weight: 600;
}

/* 子模块样式 */
.sub-section {
    margin-bottom: 24px;
    padding: 20px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #f0f0f0;
}

.sub-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
}

.sub-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.sub-header :deep(.el-button) {
    color: #409eff;
    font-size: 12px;
}

/* 信息表格 */
.info-table :deep(.el-descriptions__label) {
    background: #f7f8fa;
    color: #606266;
    font-weight: 500;
}

.info-table :deep(.el-descriptions__content) {
    color: #303133;
}

/* 保健信息表格 */
.health-table {
    margin-bottom: 16px;
}

.health-table :deep(.el-table__header th) {
    background: #f7f8fa;
    color: #606266;
    font-weight: 600;
}

.health-table :deep(.el-link) {
    margin-right: 8px;
    font-size: 12px;
}

/* 新增行输入区域 */
.add-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 6px;
}

.input-field {
    flex: 1;
}

.action-buttons {
    display: flex;
    gap: 8px;
}

.action-buttons :deep(.el-button) {
    font-size: 12px;
    padding: 6px 12px;
}

/* 上传区域 */
.upload-area {
    display: flex;
    gap: 12px;
}

.upload-area :deep(.el-upload--picture-card) {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    border: 1px dashed #dcdfe6;
}

.upload-area :deep(.el-icon) {
    font-size: 18px;
    color: #909399;
}

/* 上传项目样式 */
.upload-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-label {
    font-size: 12px;
    color: #606266;
    font-weight: 500;
    text-align: center;
}

/* 供应商信息样式 */
.supplier-item {
    margin-bottom: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 6px;
}

.supplier-header {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.supplier-title {
    font-size: 14px;
    font-weight: 600;
    color: #303133;
}

.supplier-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.supplier-content .info-table {
    margin-bottom: 12px;
}

.supplier-content .upload-area {
    flex-wrap: wrap;
    gap: 16px;
}

/* 照片网格 */
.photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.photo-thumb {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid #ebeef5;
}

.photos-grid :deep(.el-upload--picture-card) {
    width: 88px;
    height: 88px;
    border-radius: 6px;
    border: 1px dashed #dcdfe6;
}

.photos-grid :deep(.el-icon) {
    font-size: 18px;
    color: #909399;
}

/* 占位内容 */
.placeholder-content {
    padding: 40px;
    text-align: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .header-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .cover-img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    .title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .add-row {
        flex-direction: column;
        align-items: stretch;
    }

    .action-buttons {
        justify-content: flex-end;
    }

    .upload-area {
        flex-direction: column;
        align-items: flex-start;
    }

    .supplier-content .upload-area {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
</style>
